<template>
    <div class="witness">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <FileProtectOutlined />
                <span>见证取样监管</span>
            </div>
            <div class="sidebar-tabs">
                <div class="sidebar-tab-item" :class="{ active: activeTab === 'query' }" @click="activeTab = 'query'">
                    取样数据查询
                </div>
                <div class="sidebar-tab-item" :class="{ active: activeTab === 'qrcode' }" @click="activeTab = 'qrcode'">
                    二维码录入
                </div>
            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <!-- 搜索筛选模块 -->
            <div class="search-module">
                <div class="search-row">
                    <div class="search-items">
                        <div class="search-item">
                            <div class="label">地区</div>
                            <a-select
                                v-model:value="searchForm.area"
                                placeholder="吉林省/全部"
                                style="width: 240px; height: 32px">
                                <a-select-option value="吉林省/全部">吉林省/全部</a-select-option>
                            </a-select>
                        </div>

                        <div class="search-item">
                            <div class="label">资质分类</div>
                            <a-select
                                v-model:value="searchForm.qualification"
                                placeholder="全部"
                                style="width: 240px; height: 32px">
                                <a-select-option value="全部">全部</a-select-option>
                            </a-select>
                        </div>

                        <div class="search-item">
                            <div class="label">日期</div>
                            <a-range-picker
                                v-model:value="searchForm.dateRange"
                                style="width: 240px; height: 32px"
                                :placeholder="['开始日期', '结束日期']" />
                        </div>
                    </div>

                    <div class="search-buttons">
                        <a-button type="primary" @click="showMoreSearch = !showMoreSearch">
                            更多查询
                            <DownOutlined />
                        </a-button>
                        <a-button type="primary">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            查询
                        </a-button>
                        <a-button>
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                            重置
                        </a-button>
                        <a-button type="primary"> 导出 </a-button>
                    </div>
                </div>

                <!-- 更多查询 -->
                <div class="more-search" v-show="showMoreSearch">
                    <div class="more-search-item">
                        <div class="more-search-item-label">委托编号</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">主管或监督部门</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">报告编号</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">机构</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">样品编号</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">见证人</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">取样人</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>

                    <div class="more-search-item">
                        <div class="more-search-item-label">状态</div>
                        <a-select
                            v-model:value="searchForm.qualification"
                            placeholder="全部"
                            style="width: 240px; height: 32px">
                            <a-select-option value="全部">全部</a-select-option>
                        </a-select>
                    </div>
                </div>

                <!-- 底部按钮 -->
                <div class="bottom-buttons">
                    <a-button type="primary" @click="qyxxModelValue = true">查看取样</a-button>
                    <a-button type="primary">查看见证</a-button>
                    <a-button type="primary" @click="ypzsxxModelValue = true">查看验样</a-button>
                    <a-button type="primary">查看详情</a-button>
                    <a-button>打印</a-button>
                    <a-button>批量打印</a-button>
                </div>
            </div>

            <!-- 表格 -->
            <div class="table-container">
                <a-table
                    :dataSource="tableData"
                    :columns="columns"
                    :pagination="pagination"
                    :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    :rowKey="(record) => record.id"
                    @change="handleTableChange"
                    :scroll="{ x: 1500 }">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'sampleNumber'">
                            <a @click="viewDetails(record)">{{ record.sampleNumber }}</a>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>

        <Modal v-model="qyxxModelValue" title="取样信息">
            <div class="w-full flex flex-row gap-20">
                <div class="flex-1">
                    <div class="flex items-center mb-23">
                        <a-divider style="height: 15px; width: 4px; background-color: #1464d5" type="vertical" />
                        <span>委托信息</span>
                    </div>
                    <a-form :model="wtxxFormState" :labelCol="labelCol">
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="监督登记号" label="监督登记号">
                                    <a-input v-model:value="wtxxFormState.jddjh"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="8">
                                <a-form-item name="监督单位" label="监督单位">
                                    <a-input v-model:value="wtxxFormState.jddw"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="8">
                                <a-form-item name="电子委托编码" label="电子委托编码">
                                    <a-input v-model:value="wtxxFormState.dzwtbh"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="16">
                                <a-form-item name="检测机构" label="检测机构">
                                    <a-input v-model:value="wtxxFormState.jcjg"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="8">
                                <a-form-item name="送检类型" label="送检类型">
                                    <a-input v-model:value="wtxxFormState.sjlx"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="24">
                                <a-form-item name="委托单位" label="委托单位">
                                    <a-input v-model:value="wtxxFormState.wtdw"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="工程名称" label="工程名称">
                                    <a-input v-model:value="wtxxFormState.gcmc"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="工程地址" label="工程地址">
                                    <a-input v-model:value="wtxxFormState.gcdz"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="委托日期" label="委托日期">
                                    <a-input v-model:value="wtxxFormState.wtrq"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="施工单位" label="施工单位">
                                    <a-input v-model:value="wtxxFormState.sgdw"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="取样人" label="取样人">
                                    <a-input v-model:value="wtxxFormState.qyr"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="取样日期" label="取样日期">
                                    <a-input v-model:value="wtxxFormState.qyrq"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="监理单位" label="监理单位">
                                    <a-input v-model:value="wtxxFormState.jldw"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="见证人" label="见证人">
                                    <a-input v-model:value="wtxxFormState.jzr"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="见证日期" label="见证日期">
                                    <a-input v-model:value="wtxxFormState.jzrq"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>

                    <div class="flex items-center mb-23">
                        <a-divider style="height: 15px; width: 4px; background-color: #1464d5" type="vertical" />
                        <span>样品信息</span>
                    </div>
                    <a-form :model="ypxxFormState" :labelCol="labelCol">
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="委托单位数" label="委托单位数">
                                    <a-input v-model:value="ypxxFormState.wtdws"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="8">
                                <a-form-item name="直径1(mm)" label="直径1(mm)">
                                    <a-input v-model:value="ypxxFormState.zjOne"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="8">
                                <a-form-item name="直径2(mm)" label="直径2(mm)">
                                    <a-input v-model:value="ypxxFormState.zjTwo"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="牌号" label="牌号">
                                    <a-input v-model:value="ypxxFormState.ph"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="炉批号" label="炉批号">
                                    <a-input v-model:value="ypxxFormState.lph"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="代表批量(个)" label="代表批量(个)">
                                    <a-input v-model:value="ypxxFormState.dbpl"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="工程部位" label="工程部位">
                                    <a-input v-model:value="ypxxFormState.gcbw"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="焊工姓名" label="焊工姓名">
                                    <a-input v-model:value="ypxxFormState.hgxm"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="焊工证号" label="焊工证号">
                                    <a-input v-model:value="ypxxFormState.hgzh"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="生成厂家" label="生成厂家">
                                    <a-input v-model:value="ypxxFormState.sccj"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="检验形式" label="检验形式">
                                    <a-input v-model:value="ypxxFormState.jyxs"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="焊接类别" label="焊接类别">
                                    <a-input v-model:value="ypxxFormState.hjlb"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="初检编号" label="初检编号">
                                    <a-input v-model:value="ypxxFormState.cjbh"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="来样支数" label="来样支数">
                                    <a-input v-model:value="ypxxFormState.lyzs"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="样品状态" label="样品状态">
                                    <a-input v-model:value="ypxxFormState.ypzt"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="原材编号" label="原材编号">
                                    <a-input v-model:value="ypxxFormState.ycph"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="试件编号" label="试件编号">
                                    <a-input v-model:value="ypxxFormState.sjbh"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="见证记录编号" label="见证记录编号">
                                    <a-input v-model:value="ypxxFormState.jzjrbh"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="样品名称" label="样品名称">
                                    <a-input v-model:value="wtdjYpxxFormState.ypmc"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="工艺检验编号" label="工艺检验编号">
                                    <a-input v-model:value="wtdjYpxxFormState.gyjybh"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="焊接时间" label="焊接时间">
                                    <a-input v-model:value="wtdjYpxxFormState.hjsj"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="12">
                            <a-col :span="8">
                                <a-form-item name="原材报告编号" label="原材报告编号">
                                    <a-input v-model:value="wtdjYpxxFormState.ycbgbh"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="抗震要求" label="抗震要求">
                                    <a-input v-model:value="wtdjYpxxFormState.kzyq"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item name="备注" label="备注">
                                    <a-input v-model:value="wtdjYpxxFormState.bz"></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>

                <div>
                    <div class="flex items-center mb-23">
                        <span>取样图片</span>
                    </div>

                    <div class="flex flex-row gap-10 w-full mb-23">
                        <div class="flex flex-col gap-6 flex-1 items-center">
                            <img src="@/assets/images/qyyp.png" class="h-190 w-270 bg-#e8e8e8" alt="" />
                            <span>取样样品</span>
                        </div>

                        <div class="flex flex-col gap-6 flex-1 items-center">
                            <img src="@/assets/images/qyry.png" class="h-190 w-270 bg-#e8e8e8" alt="" />
                            <span>取样人员</span>
                        </div>
                    </div>

                    <div class="flex items-center mb-23">
                        <span>定位信息</span>
                    </div>

                    <div class="flex flex-col gap-10">
                        <img src="@/assets/images/dwxx.png" class="h-240 w-558 bg-#e8e8e8" alt="" />

                        <div class="flex flex-row gap-24">
                            <div class="flex flex-row gap-4 items-center">
                                <img src="@/assets/images/qydzIcon.png" class="h-14 w-14" alt="" />
                                <span>取样地址</span>
                            </div>

                            <div class="flex flex-row gap-4 items-center">
                                <img src="@/assets/images/gcdzIcon.png" class="h-14 w-14" alt="" />
                                <span>工程地址</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>

        <Modal v-model="ypzsxxModelValue" title="样品追溯详情">
            <div>
                <div class="flex items-center mb-23">
                    <a-divider style="height: 15px; width: 4px; background-color: #1464d5" type="vertical" />
                    <span>基本信息</span>
                </div>
                <div class="rounded-12 bg-#F7F8FA px-16 pt-16 mb-23">
                    <a-descriptions>
                        <a-descriptions-item v-for="item in jbxxDescriptions" :label="item.label">{{
                            item.value
                        }}</a-descriptions-item>
                    </a-descriptions>
                </div>
                <div class="flex items-center mb-23">
                    <a-divider style="height: 15px; width: 4px; background-color: #1464d5" type="vertical" />
                    <span>见证取样过程</span>
                </div>

                <div>
                    <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />

                    <a-steps
                        progress-dot
                        direction="vertical"
                        class="mt-23"
                        style="width: 100%"
                        v-if="current[0] == '1'">
                        <a-step>
                            <template #title>
                                <a-collapse :bordered="false" expandIconPosition="end" :default-active-key="['1']">
                                    <a-collapse-panel key="1">
                                        <template #header>
                                            <div class="flex flex-row gap-10">
                                                <span>委托登记</span>
                                                <span class="text-#999999">2025-02-19 13:42</span>
                                            </div>
                                        </template>
                                        <div class="w-full flex flex-row gap-10">
                                            <a-menu
                                                v-model:selectedKeys="selectedKeys"
                                                style="width: 100px"
                                                mode="inline"
                                                :items="collapseMenuItems"></a-menu>

                                            <a-form
                                                :model="wtdjFormState"
                                                :labelCol="labelCol"
                                                v-if="selectedKeys[0] == 'wtxx'"
                                                class="flex-1">
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="监督登记编号" label="监督登记编号">
                                                            <a-input v-model:value="wtdjFormState.jddjbh"></a-input>
                                                        </a-form-item>
                                                    </a-col>

                                                    <a-col :span="8">
                                                        <a-form-item name="监督单位" label="监督单位">
                                                            <a-input v-model:value="wtdjFormState.jddw"></a-input>
                                                        </a-form-item>
                                                    </a-col>

                                                    <a-col :span="8">
                                                        <a-form-item name="委托编号" label="委托编号">
                                                            <a-input v-model:value="wtdjFormState.wtbh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="检测单位" label="检测单位">
                                                            <a-input v-model:value="wtdjFormState.jcdw"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="委托单位" label="委托单位">
                                                            <a-input v-model:value="wtdjFormState.wtdw"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="委托日期" label="委托日期">
                                                            <a-input v-model:value="wtdjFormState.wtrq"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="施工单位" label="施工单位">
                                                            <a-input v-model:value="wtdjFormState.sgdw"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="取样人" label="取样人">
                                                            <a-input v-model:value="wtdjFormState.qyr"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="取样日期" label="取样日期">
                                                            <a-input v-model:value="wtdjFormState.qyrq"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="监理单位" label="监理单位">
                                                            <a-input v-model:value="wtdjFormState.jldw"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="见证人" label="见证人">
                                                            <a-input v-model:value="wtdjFormState.jzr"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="见证日期" label="见证日期">
                                                            <a-input v-model:value="wtdjFormState.jzrq"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="委托人" label="委托人">
                                                            <a-input v-model:value="wtdjFormState.wtr"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="委托人电话" label="委托人电话">
                                                            <a-input v-model:value="wtdjFormState.wtdh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="送检类型" label="送检类型">
                                                            <a-input v-model:value="wtdjFormState.sjlx"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                            </a-form>

                                            <a-form
                                                :model="wtdjYpxxFormState"
                                                :labelCol="labelCol"
                                                v-else
                                                class="flex-1">
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="委托单位数" label="委托单位数">
                                                            <a-input v-model:value="wtdjYpxxFormState.wtdws"></a-input>
                                                        </a-form-item>
                                                    </a-col>

                                                    <a-col :span="8">
                                                        <a-form-item name="直径1(mm)" label="直径1(mm)">
                                                            <a-input v-model:value="wtdjYpxxFormState.zjOne"></a-input>
                                                        </a-form-item>
                                                    </a-col>

                                                    <a-col :span="8">
                                                        <a-form-item name="直径2(mm)" label="直径2(mm)">
                                                            <a-input v-model:value="wtdjYpxxFormState.zjTwo"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="牌号" label="牌号">
                                                            <a-input v-model:value="wtdjYpxxFormState.ph"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="炉批号" label="炉批号">
                                                            <a-input v-model:value="wtdjYpxxFormState.lph"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="代表批量(个)" label="代表批量(个)">
                                                            <a-input v-model:value="wtdjYpxxFormState.dbpl"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="工程部位" label="工程部位">
                                                            <a-input v-model:value="wtdjYpxxFormState.gcbw"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="焊工姓名" label="焊工姓名">
                                                            <a-input v-model:value="wtdjYpxxFormState.hgxm"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="焊工证号" label="焊工证号">
                                                            <a-input v-model:value="wtdjYpxxFormState.hgzh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="生成厂家" label="生成厂家">
                                                            <a-input v-model:value="wtdjYpxxFormState.sccj"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="检验形式" label="检验形式">
                                                            <a-input v-model:value="wtdjYpxxFormState.jyxs"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="焊接类别" label="焊接类别">
                                                            <a-input v-model:value="wtdjYpxxFormState.hjlb"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="初检编号" label="初检编号">
                                                            <a-input v-model:value="wtdjYpxxFormState.cjbh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="来样支数" label="来样支数">
                                                            <a-input v-model:value="wtdjYpxxFormState.lyzs"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="样品状态" label="样品状态">
                                                            <a-input v-model:value="wtdjYpxxFormState.ypzt"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>

                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="原材编号" label="原材编号">
                                                            <a-input v-model:value="wtdjYpxxFormState.ycph"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="试件编号" label="试件编号">
                                                            <a-input v-model:value="wtdjYpxxFormState.sjbh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="见证记录编号" label="见证记录编号">
                                                            <a-input v-model:value="wtdjYpxxFormState.jzjrbh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>

                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="样品名称" label="样品名称">
                                                            <a-input v-model:value="wtdjYpxxFormState.ypmc"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="工艺检验编号" label="工艺检验编号">
                                                            <a-input v-model:value="wtdjYpxxFormState.gyjybh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="焊接时间" label="焊接时间">
                                                            <a-input v-model:value="wtdjYpxxFormState.hjsj"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>

                                                <a-row :gutter="12">
                                                    <a-col :span="8">
                                                        <a-form-item name="原材报告编号" label="原材报告编号">
                                                            <a-input v-model:value="wtdjYpxxFormState.ycbgbh"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="抗震要求" label="抗震要求">
                                                            <a-input v-model:value="wtdjYpxxFormState.kzyq"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="8">
                                                        <a-form-item name="备注" label="备注">
                                                            <a-input v-model:value="wtdjYpxxFormState.bz"></a-input>
                                                        </a-form-item>
                                                    </a-col>
                                                </a-row>
                                            </a-form>
                                        </div>
                                    </a-collapse-panel>
                                </a-collapse>
                            </template>
                        </a-step>
                        <a-step>
                            <template #title>
                                <a-collapse :bordered="false" expandIconPosition="end" :default-active-key="['1']">
                                    <a-collapse-panel key="1">
                                        <template #header>
                                            <div class="flex flex-row gap-10">
                                                <span>现场取样</span>
                                                <span class="text-#999999">2025-02-19 13:42</span>
                                            </div>
                                        </template>
                                    </a-collapse-panel>
                                </a-collapse>
                            </template>
                        </a-step>

                        <a-step>
                            <template #title>
                                <a-collapse :bordered="false" expandIconPosition="end" :default-active-key="['2']">
                                    <a-collapse-panel key="2">
                                        <template #header>
                                            <div class="flex flex-row gap-10">
                                                <span>现场见证</span>
                                                <span class="text-#999999">2025-02-19 13:54</span>
                                            </div>
                                        </template>
                                    </a-collapse-panel>
                                </a-collapse>
                            </template>
                        </a-step>
                    </a-steps>

                    <div class="grid-container" v-if="current[0] == '2'">
                        <template v-for="i in 3">
                            <a-descriptions title="现场取样" :column="1" class="grid-item">
                                <a-descriptions-item label="施工单位">中国建筑第二工程局有限公司</a-descriptions-item>
                                <a-descriptions-item label="取样人">明晨咏</a-descriptions-item>
                                <a-descriptions-item label="联系电话">19201928291</a-descriptions-item>
                                <a-descriptions-item label="取样时间">2025-02-19 14:46:03</a-descriptions-item>
                                <a-descriptions-item label="取样地址">吉林省吉林市二道区东吉林大路</a-descriptions-item>
                            </a-descriptions>

                            <div class="grid-item">
                                <div class="descriptions-title">取样样品</div>
                                <img src="" class="w-220 h-146 bg-sky mt-20" alt="" />
                            </div>

                            <div class="grid-item">
                                <div class="descriptions-title">取样人员</div>
                                <img src="" class="w-220 h-146 bg-sky mt-20" alt="" />
                            </div>

                            <div class="grid-item">
                                <div class="descriptions-title">其他</div>
                            </div>
                        </template>
                    </div>

                    <div class="flex flex-col gap-10 mt-20" v-if="current[0] == '3'">
                        <div class="flex flex-row gap-24">
                            <div class="flex flex-row gap-4 items-center">
                                <img src="@/assets/images/qydzIcon.png" class="h-14 w-14" alt="" />
                                <span>取样地址</span>
                            </div>

                            <div class="flex flex-row gap-4 items-center">
                                <img src="@/assets/images/jzdzIcon.png" class="h-14 w-14" alt="" />
                                <span>见证地址</span>
                            </div>

                            <div class="flex flex-row gap-4 items-center">
                                <img src="@/assets/images/gcdzIcon.png" class="h-14 w-14" alt="" />
                                <span>工程地址</span>
                            </div>
                        </div>
                        <img src="@/assets/images/dwxx.png" class="h-338 w-full bg-#e8e8e8" alt="" />
                    </div>

                    <div class="mt-20" v-if="current[0] == '4'">
                        <div class="rounded-12 bg-#F7F8FA px-16 pt-16 mb-23">
                            <a-descriptions>
                                <a-descriptions-item v-for="item in gcxxDescriptions" :label="item.label">{{
                                    item.value
                                }}</a-descriptions-item>

                                <a-descriptions-item label="工程详情">
                                    <span class="text-#1464D5 cursor-pointer">立即查看</span>
                                </a-descriptions-item>
                            </a-descriptions>
                        </div>

                        <div class="flex flex-col gap-20">
                            <div class="flex items-center">
                                <span>施工单位</span>
                            </div>
                            <a-table :columns="sgdwColumns" :dataSource="sgdwTableData" :pagination="false"> </a-table>

                            <div class="flex items-center">
                                <span>监理单位</span>
                            </div>
                            <a-table :columns="sgdwColumns" :dataSource="sgdwTableData" :pagination="false"> </a-table>

                            <div class="flex items-center">
                                <span>建设单位</span>
                            </div>
                            <a-table :columns="sgdwColumns" :dataSource="sgdwTableData" :pagination="false"> </a-table>
                        </div>
                    </div>

                    <div class="jcxx-grid-container" v-if="current[0] == '6'">
                        <div class="grid-item">
                            <div class="descriptions-title">取样样品</div>
                        </div>
                        <div class="grid-item">
                            <div class="descriptions-title">试验过程抓拍图</div>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script setup>
    import { ref, reactive, h } from 'vue';
    import { SearchOutlined, DownOutlined, ReloadOutlined, FileProtectOutlined } from '@ant-design/icons-vue';
    import Modal from '@/components/modal/modal.vue';
    const current = ref(['1']);
    const items = ref([
        {
            key: '1',
            label: '全过程跟踪',
            title: '全过程跟踪'
        },
        {
            key: '2',
            label: '现场照片',
            title: '现场照片'
        },
        {
            key: '3',
            label: '位置信息',
            title: '位置信息'
        },
        {
            key: '4',
            label: '工程信息',
            title: '工程信息'
        },
        {
            key: '5',
            label: '出厂信息',
            title: '出厂信息'
        },
        {
            key: '6',
            label: '检测信息',
            title: '检测信息'
        }
    ]);
    const sgdwColumns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index'
        },
        {
            title: '企业名称',
            dataIndex: 'qymc',
            key: 'qymc'
        },

        {
            title: '企业地址',
            dataIndex: 'qydz',
            key: 'qydz'
        },

        {
            title: '联系人',
            dataIndex: 'lxr',
            key: 'lxr'
        },
        {
            title: '联系方式',
            dataIndex: 'lxfs',
            key: 'lxfs'
        }
    ];
    const sgdwTableData = [
        {
            index: 1,
            qymc: '中国建筑第二工程局有限公司',
            qydz: '吉林省吉林市二道区东吉林大路',
            lxr: '明晨咏',
            lxfs: '19201928291'
        }
    ];
    const selectedKeys = ref(['wtxx']);

    const collapseMenuItems = reactive([
        {
            label: '委托信息',
            key: 'wtxx'
        },
        {
            label: '样品信息',
            key: 'ypxx'
        }
    ]);

    const qyxxModelValue = ref(false);

    const ypzsxxModelValue = ref(false);

    const jbxxDescriptions = ref([
        {
            label: '监测机构',
            value: '吉林省新方圆检测认证股份有限公司'
        },
        {
            label: '检测项目（标准号）',
            value: '钢筋焊接(JGJ18-2012)'
        },
        {
            label: '工程名称',
            value: '吉林市城市轨道交通空港线(9号线)期工程七工区'
        },
        {
            label: '样品状态',
            value: '已见证'
        },
        {
            label: '唯一标识码',
            value: '2024N1348021'
        },
        {
            label: '报告编号',
            value: '72873382109832'
        }
    ]);

    const gcxxDescriptions = ref([
        {
            label: '工程编号',
            value: 'GC202405230031'
        },
        {
            label: '工程名称',
            value: '吉林省轨道交通项目'
        },
        {
            label: '工程地址',
            value: '吉林省东吉林大道和雾开河大道所夹地块内'
        },
        {
            label: '监督编号',
            value: 'GC202405230031'
        },
        {
            label: '施工许可：',
            value: ''
        },
        {
            label: '所属监督站',
            value: '吉林市质量安全监督单位(市站)'
        },
        {
            label: '工程状态：',
            value: '在建'
        },
        {
            label: '工程类型：',
            value: '轨道交通项目'
        }
    ]);

    // 搜索表单数据
    const searchForm = ref({
        area: '吉林省/全部',
        qualification: '全部',
        dateRange: null,
        orderNumber: '',
        department: '',
        reportNumber: '',
        organization: '全部',
        sampleNumber: '',
        witness: '',
        sampler: '',
        status: '全部'
    });

    const showMoreSearch = ref(false);

    const wtxxFormState = reactive({
        jddjh: 'GC202405230031',
        jddw: '吉林省质量安全监督单位',
        dzwtbh: 'WT2502000234',
        jcjg: '吉林省新方圆检测认证股份有限公司',
        sjlx: '有见证送检',
        wtdw: '吉林省地铁有限责任公司',
        gcmc: '吉林省城市轨道交通',
        gcdz: '',
        wtrq: '1977-05-07',
        sgdw: '中国建筑第二工程局有限公司',
        qyr: '龙苑',
        qyrq: '1977-05-07',
        jldw: '吉林省天泰建筑工程',
        jzr: '葛裕欣',
        jzrq: '1977-05-07'
    });

    const ypxxFormState = reactive({
        wtdws: '吉林省城市轨道交通',
        zjOne: '200',
        zjTwo: '300',
        ph: 'HRB400E',
        lph: 'A001',
        dbpl: '/',
        gcbw: '联合检修库桩基工程',
        hgxm: '洪军',
        hgzh: 'T22031919298553',
        sccj: '',
        jyxs: '工艺检验',
        hjlb: '单面搭焊接',
        cjbh: '',
        lyzs: '',
        ypzt: '',

        ycbh: '',
        sjbh: '',
        jzjrbh: '',

        ypmc: '',
        gyjybh: '',
        hjsj: '',

        ycbgbh: '',
        kzyq: '',
        bz: ''
    });

    const wtdjFormState = reactive({
        jddjbh: 'GC202405230031',
        jddw: '吉林市质量安全监督单位(市站)',
        wtbh: 'WT2502000234',

        jcdw: '吉林省新方圆检测认证有限公司',
        wtdw: '吉林市地铁有限责任公司',
        wtrq: '2025-02-19 13:43:53',

        sgdw: '中国建筑第二工程局有限公司',
        qyr: '陈泽泰',
        qyrq: '2025-02-19 13:43:53',

        jldw: '吉林省天泰建筑工程项目管理有限公司',
        jzr: '卞姣',
        jzrq: '2025-02-19 13:43:53',

        wtr: '禹中瑶',
        wtdh: '1920828918',
        sjlx: '有见证送检'
    });

    const wtdjYpxxFormState = reactive({
        wtdws: '吉林省城市轨道交通',
        zjOne: '200',
        zjTwo: '300',
        ph: 'HRB400E',
        lph: 'A001',
        dbpl: '/',
        gcbw: '联合检修库桩基工程',
        hgxm: '洪军',
        hgzh: 'T22031919298553',
        sccj: '',
        jyxs: '工艺检验',
        hjlb: '单面搭焊接',
        cjbh: '',
        lyzs: '',
        ypzt: '',
        ycph: '',
        sjbh: '',
        jzjrbh: 'Hdd2222',
        ypmc: '钢筋焊接',
        gyjybh: '202405230031',
        hjsj: '2025-02-19 13:43:53',
        ycbgbh: '',
        kzyq: '',
        bz: ''
    });

    const labelCol = { style: { width: '100px' } };

    // 侧边栏当前选中的标签
    const activeTab = ref('query');

    // 表格列定义
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 60
        },
        {
            title: '样品编号',
            dataIndex: 'sampleNumber',
            width: 150
        },
        {
            title: '委托登记编号',
            dataIndex: 'orderNumber',
            width: 150
        },
        {
            title: '工程名称',
            dataIndex: 'projectName',
            width: 200,
            ellipsis: true
        },
        {
            title: '主管或监督部门',
            dataIndex: 'department',
            width: 180,
            ellipsis: true
        },
        {
            title: '工程部位',
            dataIndex: 'projectLocation',
            width: 120
        },
        {
            title: '检测机构',
            dataIndex: 'testingOrg',
            width: 150,
            ellipsis: true
        },
        {
            title: '检测项目',
            dataIndex: 'testItem',
            width: 120
        },
        {
            title: '唯一性标识',
            dataIndex: 'uniqueId',
            width: 200
        },
        {
            title: '取样时间',
            dataIndex: 'samplingTime',
            width: 180
        },
        {
            title: '见证时间',
            dataIndex: 'witnessTime',
            width: 180
        }
    ];

    // 表格数据
    const tableData = ref([
        {
            id: 1,
            index: 1,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        },
        {
            id: 2,
            index: 2,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        },
        {
            id: 3,
            index: 3,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        },
        {
            id: 4,
            index: 4,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        },
        {
            id: 5,
            index: 5,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        },
        {
            id: 6,
            index: 6,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        },
        {
            id: 7,
            index: 7,
            sampleNumber: '202502000229',
            orderNumber: 'WT2502000233',
            projectName: '吉林市城市轨道交通1号线一期工程',
            department: '吉林市重点安全工程',
            projectLocation: '桩基',
            testingOrg: '吉林省星星工程检测有限公司',
            testItem: '混凝土抗压',
            uniqueId: '23BBA7DE708...',
            samplingTime: '2025-02-19 12:36:55',
            witnessTime: '2025-02-19 12:36:55'
        }
    ]);

    // 选中行的key
    const selectedRowKeys = ref([]);

    // 分页配置
    const pagination = {
        current: 1,
        pageSize: 10,
        total: 100,
        showSizeChanger: false
    };

    // 选择行变化
    const onSelectChange = (keys) => {
        selectedRowKeys.value = keys;
    };

    // 表格变化（排序、筛选、分页）
    const handleTableChange = (pag, filters, sorter) => {
        console.log('表格变化:', pag, filters, sorter);
        // 这里可以根据变化重新请求数据
    };

    // 查看详情
    const viewDetails = (record) => {
        console.log('查看详情:', record);
        // 这里可以实现查看详情的逻辑
    };
</script>

<style lang="scss" scoped>
    .descriptions-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: auto;
        color: rgba(0, 0, 0, 0.88);
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
    }

    .witness {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;

        .sidebar {
            height: 100%;
            width: min(240px, 12.5vw);
            background: #1464d5;
            display: flex;
            flex-direction: column;
            color: #fff;

            .sidebar-header {
                display: flex;
                align-items: center;
                padding: min(20px, 1.04vw);
                font-size: min(18px, 0.94vw);
                font-weight: 500;

                .anticon {
                    margin-right: min(10px, 0.52vw);
                    font-size: min(20px, 1.04vw);
                }
            }

            .sidebar-tabs {
                display: flex;
                flex-direction: column;

                .sidebar-tab-item {
                    padding: min(15px, 0.78vw) min(20px, 1.04vw);
                    cursor: pointer;
                    font-size: min(16px, 0.83vw);
                    transition: all 0.3s;
                    color: rgba(255, 255, 255, 0.8);

                    &:hover {
                        color: #fff;
                        background-color: rgba(255, 255, 255, 0.1);
                    }

                    &.active {
                        color: #1464d5;
                        background-color: #fff;
                        font-weight: 500;
                    }
                }
            }
        }

        .content {
            flex: 1;
            padding: min(30px, 1.56vw);
            overflow-y: auto;

            .search-module {
                width: 100%;
                background: #fff;
                border-radius: 12px;
                padding: min(24px, 1.25vw);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .search-row {
                    display: flex;
                    align-items: center;
                    gap: min(26px, 1.35vw);
                    flex-wrap: wrap;
                    justify-content: flex-start;

                    .search-items {
                        display: flex;
                        gap: min(20px, 1.04vw);
                        flex-wrap: wrap;

                        .search-item {
                            position: relative;
                            display: flex;
                            align-items: center;

                            .label {
                                font-size: min(18px, 0.94vw);
                                color: #333;
                                margin-right: min(12px, 0.63vw);
                                white-space: nowrap;
                            }

                            .icon-wrapper {
                                position: absolute;
                                right: min(8px, 0.42vw);
                                top: min(38px, 1.98vw);
                                color: #999;
                                cursor: pointer;
                            }
                        }
                    }

                    .search-buttons {
                        display: flex;
                        align-items: flex-end;
                        gap: min(12px, 0.63vw);
                        flex-wrap: wrap;
                    }
                }

                .more-search {
                    padding: 10px 0;
                    width: 100%;
                    border-radius: 12px;
                    display: grid;
                    grid-template: repeat(2, 1fr) / repeat(auto-fit, minmax(240px, 1fr));
                    padding-right: min(66px, 3.44vw);
                    padding-left: min(58px, 3.02vw);
                    gap: 10px;
                    overflow: hidden;
                    transition: all 0.3s;
                    margin-top: min(24px, 1.25vw);
                    border: 1px solid #d9d9d9;
                    height: fit-content;
                    margin-bottom: min(18px, 0.94vw);

                    .more-search-item {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;

                        .more-search-item-label {
                            white-space: nowrap;
                            font-size: min(18px, 0.94vw);
                            color: #333333;
                            margin-right: min(12px, 0.63vw);
                        }
                    }
                }

                .bottom-buttons {
                    display: flex;
                    gap: min(8px, 0.42vw);
                    margin-top: 20px;
                    flex-wrap: wrap;
                }
            }

            .table-container {
                margin-top: min(20px, 1.04vw);
                background: #fff;
                border-radius: 12px;
                padding: min(20px, 1.04vw);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                overflow: hidden;

                :deep(.ant-table-wrapper) {
                    overflow-x: auto;
                }

                :deep(.ant-table) {
                    .ant-table-thead > tr > th {
                        background-color: #f5f5f5;
                        font-weight: 500;
                        color: #333;
                        font-size: min(14px, 0.73vw);
                    }

                    .ant-table-tbody > tr > td {
                        border-bottom: 1px solid #f0f0f0;
                        font-size: min(14px, 0.73vw);
                    }

                    .ant-table-tbody > tr:hover > td {
                        background-color: #f5f7fa;
                    }

                    .ant-pagination {
                        margin: min(16px, 0.83vw) 0;
                    }

                    .ant-table-selection-column,
                    .ant-table-cell.ant-table-cell-fix-left {
                        position: sticky;
                        z-index: 2;
                        background: #fff;
                    }

                    .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left {
                        background-color: #f5f7fa;
                    }

                    .ant-table-thead > tr > th {
                        position: sticky;
                        top: 0;
                        z-index: 1;
                    }

                    .ant-table-body {
                        &::-webkit-scrollbar {
                            width: min(6px, 0.31vw);
                            height: min(6px, 0.31vw);
                        }

                        &::-webkit-scrollbar-thumb {
                            background: #ccc;
                            border-radius: min(3px, 0.16vw);
                        }

                        &::-webkit-scrollbar-track {
                            background: #f1f1f1;
                            border-radius: min(3px, 0.16vw);
                        }
                    }
                }
            }
        }

        .grid-container {
            margin-top: min(20px, 1.04vw);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            width: 100%;
            border-top: 1px solid rgba(0, 0, 0, 0.15);
            border-left: 1px solid rgba(0, 0, 0, 0.15);
        }

        .jcxx-grid-container {
            margin-top: min(20px, 1.04vw);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            width: 100%;
            border-top: 1px solid rgba(0, 0, 0, 0.15);
            border-left: 1px solid rgba(0, 0, 0, 0.15);
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            padding: min(20px, 1.04vw);
            border-right: 1px solid rgba(0, 0, 0, 0.15);
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        }

        @media screen and (max-width: 1440px) {
            .search-module {
                .search-row {
                    .search-items {
                        .search-item {
                            .ant-select {
                                width: min(200px, 13.89vw) !important;
                            }
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 1280px) {
            .search-module {
                .search-row {
                    .search-items {
                        .search-item {
                            .ant-select {
                                width: min(180px, 14.06vw) !important;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
